<template>
	<view v-if="basic">
		<view class="content_wrapper">
			<view class="box_2">
				<view class="name_group">
					<view class="name">
						<view class="text">{{ basic.fullname }}</view>
						<view class="qu_ico" v-if="parseInt(basic.high_quality) === 1"></view>
						<view class="clear"></view>
					</view>
					<view class="tx1">{{ basic.current_text }}</view>
					<view class="info">
						{{ basic.age }}岁 · {{ basic.experience_text }} ·
						{{ basic.education_text }}
					</view>
					<view :class="parseInt(basic.sex) === 1 ? 'avatar_box' : 'avatar_box fe'">
						<image :src="basic.photo_img_src" :alt="basic.fullname"></image>
					</view>
				</view>
				<view class="tx2">
					{{ dateFormatFull(basic.refreshtime, true) }} 更新
					<view class="right_txt" @click="showDetail = !showDetail">更多基本信息</view>
				</view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<view class="content_wrapper">
			<!--求职意向-->
			<view class="box_3" v-if="intentionList.length">
				<view class="box_head">
					<view class="txt">求职意向</view>
				</view>
				<view class="box_content">
					<view class="tx2" v-for="(item, index) in intentionList" :key="index">
						<view class="name">
							[{{ item.district_text }}] {{ item.category_text }}
						</view>
						<view class="intent">
							{{ item.wage_text }}，{{ item.nature_text }}
							{{ fieldStore.intention.trade.is_display === 1 && item.trade_text !== '' ? `，${item.trade_text}` : '' }}
						</view>
					</view>
				</view>
			</view>
			<!--联系方式-->
			<view class="box_cac">
				<view class="box_head">
					<view class="txt">联系方式</view>
				</view>
				<view class="box_content">
					<view class="item phone" v-if="contact.mobile !== ''">
						手机：{{ contact.mobile }}
					</view>
					<!-- <view class="item wx" v-if="contact.weixin !== ''">
						微信：{{ contact.weixin }}
					</view> -->
					<view class="item email" v-if="contact.email !== ''">
						邮箱：{{ contact.email }}
					</view>
					<view class="item qq" v-if="contact.qq !== ''">
						QQ：{{ contact.qq }}
					</view>
				</view>
			</view>
			<!--自我描述-->
			<view class="box_5" v-if="basic.tag_text_arr.length || basic.specialty">
				<view class="box_head">
					<view class="txt">自我描述</view>
				</view>
				<view class="box_content">
					<!--特长标签-->
					<view class="tag" v-if="basic.tag_text_arr.length">
						<view class="tag-item" v-for="(item, index) in basic.tag_text_arr" :key="index">
							{{ item }}
						</view>
						<view class="clear"></view>
					</view>
					<view class="dec" v-if="basic.specialty">{{ basic.specialty }}</view>
				</view>
			</view>
			<!--教育经历-->
			<view class="box_6" v-if="educationList.length">
				<view class="box_head">
					<view class="txt">教育经历</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in educationList" :key="index">
						<view class="t1">{{ item.school }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{
                parseInt(item.todate) === 0 ? dateFormat(item.endtime) : '至今'
              }}
						</view>
						<view class="t3" v-if="fieldStore.education.major.is_display === 1">{{ item.major }}</view>
					</view>
				</view>
			</view>
			<!--工作经历-->
			<view class="box_7" v-if="workList.length">
				<view class="box_head">
					<view class="txt">工作经历</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in workList" :key="index">
						<view class="t1">{{ item.companyname }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{
                parseInt(item.todate) === 0 ? dateFormat(item.endtime) : '至今'
              }}
						</view>
						<view class="t3">{{ item.jobname }}</view>
						<view class="t4">{{ item.duty }}</view>
					</view>
				</view>
			</view>
			<!--培训经历-->
			<view class="box_8" v-if="trainingList.length">
				<view class="box_head">
					<view class="txt">培训经历</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in trainingList" :key="index">
						<view class="t1">{{ item.agency }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{
                parseInt(item.todate) === 0 ? dateFormat(item.endtime) : '至今'
              }}
						</view>
						<view class="t3">{{ item.course }}</view>
						<view class="t4">{{ item.description }}</view>
					</view>
				</view>
			</view>
			<!--项目经历-->
			<view class="box_9" v-if="projectList.length">
				<view class="box_head">
					<view class="txt">项目经历</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in projectList" :key="index">
						<view class="t1">{{ item.projectname }}</view>
						<view class="t2">
							{{ dateFormat(item.starttime) }} 至
							{{
                parseInt(item.todate) === 0 ? dateFormat(item.endtime) : '至今'
              }}
						</view>
						<view class="t3">{{ item.role }}</view>
						<view class="t4">{{ item.description }}</view>
					</view>
				</view>
			</view>
			<!--获得证书-->
			<view class="box_10" v-if="certificateList.length">
				<view class="box_head">
					<view class="txt">获得证书</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in certificateList" :key="index">
						{{ item.name }}
						<view class="right_txt">{{ dateFormat(item.obtaintime) }}</view>
					</view>
				</view>
			</view>
			<!--语言能力-->
			<view class="box_11" v-if="languageList.length">
				<view class="box_head">
					<view class="txt">语言能力</view>
				</view>
				<view class="box_content">
					<view class="tx1" v-for="(item, index) in languageList" :key="index">
						{{ item.language_text }}，{{ item.level_text }}
					</view>
				</view>
			</view>
			<!--我的作品-->
			<view class="box_12">
				<view class="box_head">
					<view class="txt">我的作品</view>
				</view>
				<view class="box_content clearfix">
					<view class="img_item" v-for="(item, index) in imgList" :key="index">
						<image :src="item.img_src" alt="item.title" class="img" @click="previewImg(index)" ></image>
					</view>
				</view>
			</view>
			<!-- <view class="box_13"> -->
				<!-- <u-button type="primary" shape="circle" @click="doShare">立即分享</u-button> -->
			<!-- </view> -->
		</view>
		<u-modal v-model="showDetail" title="更多基本信息">
			<view class="details_pop_box">
				<view class="detail_line" v-if="fieldStore.basic.marriage.is_display">
					<view class="line_left">{{fieldStore.basic.marriage.field_cn}}：</view>
					<view class="line_right">{{basic.marriage_text || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.height.is_display">
					<view class="line_left">{{fieldStore.basic.height.field_cn}}：</view>
					<view class="line_right">{{basic.height || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.major.is_display">
					<view class="line_left">{{fieldStore.basic.major.field_cn}}：</view>
					<view class="line_right">{{basic.major_text || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.householdaddress.is_display">
					<view class="line_left">{{fieldStore.basic.householdaddress.field_cn}}：</view>
					<view class="line_right">{{basic.householdaddress || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.residence.is_display">
					<view class="line_left">{{fieldStore.basic.residence.field_cn}}：</view>
					<view class="line_right">{{basic.residence || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.custom_field_1.is_display">
					<view class="line_left">{{fieldStore.basic.custom_field_1.field_cn}}：</view>
					<view class="line_right">{{basic.custom_field_1 || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.custom_field_2.is_display">
					<view class="line_left">{{fieldStore.basic.custom_field_2.field_cn}}：</view>
					<view class="line_right">{{basic.custom_field_2 || '未填写'}}</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line" v-if="fieldStore.basic.custom_field_3.is_display">
					<view class="line_left">{{fieldStore.basic.custom_field_3.field_cn}}：</view>
					<view class="line_right">{{basic.custom_field_3 || '未填写'}}</view>
					<view class="clear"></view>
				</view>
			</view>
		</u-modal>
		<view class="alw-wx-layer" v-if="showWxLayer" @click="cancelShare"></view>
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="alw-layer" v-if="showLayer" @click="cancelShare"></view>
		<SharePoster v-if="showPoster" @closePoster="closePoster" :type="'resume'" :infoid="shareid"></SharePoster>
		<u-mask z-index="3" :show="showPoster" @click="showPoster=false" />
		<u-popup v-model="showShare" mode="bottom">
			<Share @cancelShare="cancelShare" @handleForward="handleForward" @handlePoster="handlePoster"></Share>
		</u-popup>
	</view>
</template>

<script>
	import wxshare from '@/static/js/share.js'
	import http from '@/utils/http'
	import api from '@/api'
	import Vue from 'vue'
	// import { ImagePreview } from 'ut'
	import Share from '@/components/share/Share'
	import SharePoster from '@/components/share/SharePoster'
	// Vue.use(ImagePreview)
	export default {
		name: 'ResumePreview',
		components: {
			Share,
			SharePoster
		},
		data() {
			return {
				previewImgList: [],
				showDetail: false,
				shareid: 0,
				showShare: false,
				showWxLayer: false,
				showLayer: false,
				showPoster: false,
				shareUrl: '',
				wechatShareInfo: {}
			}
		},
		created() {
			this.initInfo()
		},
		computed: {
			basic() {
				return this.$store.state.resume.basic
			},
			contact() {
				return this.$store.state.resume.contact
			},
			intentionList() {
				return this.$store.state.resume.intention_list
			},
			educationList() {
				return this.$store.state.resume.education_list
			},
			workList() {
				return this.$store.state.resume.work_list
			},
			trainingList() {
				return this.$store.state.resume.training_list
			},
			projectList() {
				return this.$store.state.resume.project_list
			},
			certificateList() {
				return this.$store.state.resume.certificate_list
			},
			languageList() {
				return this.$store.state.resume.language_list
			},
			imgList() {
				return this.$store.state.resume.img_list
			},
			fieldStore() {
				return this.$store.state.resume.field_rule
			}
		},
		methods: {
			doShare() {
				this.showShare = true
			},
			cancelShare() {
				this.showShare = false
				this.showWxLayer = false
				this.showLayer = false
			},
			handleForward() {
				// const agent = navigator.userAgent.toLowerCase()
				const agent = ''
				if (agent.indexOf('micromessenger') < 0) {
					setTimeout(() => {
						this.showLayer = true
					}, 150)
				} else {
					setTimeout(() => {
						this.showWxLayer = true
					}, 150)
				}
			},
			handlePoster() {
				this.shareid = this.basic.id
				this.showPoster = true
			},
			closePoster() {
				this.showPoster = false
			},
			// 初始化数据
			initInfo() {
				http
					.get(api.editResume)
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							let shareUrl = this.$store.state.config.mobile_domain + 'resume/' + res.data.data.basic.id
							let wechatShareInfo = {
								fullname: res.data.data.basic.fullname,
								sex: res.data.data.basic.sex == 1 ? '男' : '女',
								age: res.data.data.basic.age + '岁',
								education: res.data.data.basic.education_text,
								experience: res.data.data.basic.experience_text,
								intention_jobs: res.data.data.basic.intention_jobs_text
							}
							wxshare(wechatShareInfo, 'resumeshow', shareUrl)
							// 更新基本资料
							this.$store.dispatch('setBasicInfo', res.data.data.basic)
							// 更新简历模块列表
							this.$store.dispatch('setModuleList', res.data.data.module_list)
							// 更新简历字段列表
							this.$store.dispatch('setFieldList', res.data.data.field_rule)
							// 更新联系方式
							this.$store.dispatch('setResumeContact', res.data.data.contact)
							// 更新简历求职意向
							this.$store.dispatch('setIntentionList', res.data.data.intention_list)
							// 更新简历工作经历
							this.$store.dispatch('setWorkList', res.data.data.work_list)
							// 更新简历教育经历
							this.$store.dispatch('setEducationList', res.data.data.education_list)
							// 更新简历项目经历
							this.$store.dispatch('setProjectList', res.data.data.project_list)
							// 更新简历培训经历
							this.$store.dispatch('setTrainingList', res.data.data.training_list)
							// 更新简历语言能力
							this.$store.dispatch('setLanguageList', res.data.data.language_list)
							// 更新简历获得证书
							this.$store.dispatch('setCertificateList', res.data.data.certificate_list)
							// 更新简历作品
							this.$store.dispatch('setResumeImgList', res.data.data.img_list)
							this.setPreviewImgList()
						} else {
							// this.$notify(res.data.message)
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			/**
			 * 格式化日期
			 * @param time 时间戳
			 * @param isHM 是否返回时分
			 * @returns {string}
			 */
			dateFormatFull(time, isHM) {
				let date = new Date(time * 1000)
				let Y = date.getFullYear()
				let M = date.getMonth() + 1
				let D = date.getDate()
				let H = date.getHours()
				let MM = date.getMinutes()
				let timeText = ''
				if (isHM) {
					timeText = `${Y}-${this.supTen(M)}-${this.supTen(D)} ${this.supTen(
          H
        )}:${this.supTen(MM)}`
				} else {
					timeText = `${Y}-${this.supTen(M)}-${this.supTen(D)}`
				}
				return timeText
			},
			/**
			 * 不足10补0
			 * @param num
			 */
			supTen(num) {
				return parseInt(num) < 10 ? `0${num}` : num
			},
			// 格式化日期
			dateFormat(time) {
				time = new Date(time * 1000)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			},
			// 更新预览图片
			setPreviewImgList() {
				this.previewImgList = this.imgList.map(function(item) {
					return item.img_src
				})
			},
			// 预览作品
			previewImg(index) {
				ImagePreview({
					images: this.previewImgList,
					showIndex: true,
					loop: false,
					startPosition: index,
					closeOnPopstate: true,
					closeable: true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details_pop_box {
		max-height: 600rpx;
		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 26rpx;
		padding: 40rpx;

		.detail_desc {
			width: 100%;
			background-color: #f5f5f5;
			line-height: 1.5;
			color: #666666;
			padding: 16rpx 40rpx;
			margin-top: 20rpx;
		}

		.detail_line {
			line-height: 1.5;
			margin-bottom: 10rpx;
			/* #ifdef MP-ALIPAY */
			display: flex;
			align-items: center;
			justify-content: center;
			/* #endif */

			.line_left {
				float: left;
				color: #999999;
				text-align: right;
				width: 160rpx;
				line-height: 1.5;
			}

			.line_right {
				float: left;
				color: #333333;
				word-break: break-all;
				width: 360rpx;
				text-align: left;
				line-height: 1.5;

				.a_black {
					color: #333333;
					text-decoration: none;
				}

				.a_blue {
					color: #1887fb;
					text-decoration: none;
				}
			}
		}
	}

	.box_13 {
		width: 600rpx;
		margin: 0 auto;
		padding-bottom: 60rpx;
	}

	.box_12 {
		width: 100%;

		.box_content {
			.img_item {
				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					border: 0;
				}

				&:nth-of-type(3n) {
					margin-right: 0;
				}

				float: left;
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				margin: 0 40rpx 40rpx 0;
			}

			padding-bottom: 20rpx;
		}
	}

	.box_11 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.right_txt {
					position: absolute;
					right: 40rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #666666;
				}

				&:not(:last-child) {
					margin-bottom: 28rpx;
				}

				font-size: 30rpx;
				color: #333333;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_10 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				.right_txt {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #666666;
				}

				&:not(:last-child) {
					margin-bottom: 28rpx;
				}

				font-size: 30rpx;
				color: #333333;
				position: relative;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_9 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				&::before {
					content: " ";
					position: absolute;
					left: 8rpx;
					top: 12rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					border: 4rpx solid #3388ff;
					background-color: #ffffff;
				}

				&::after {
					content: " ";
					position: absolute;
					left: 14rpx;
					top: 32rpx;
					height: 93%;
					border-right: 2rpx solid #f5f5f5;
				}

				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 13rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 21rpx;
				}

				padding: 0 50rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}
			}

			padding-bottom: 35rpx;
		}
	}

	.box_8 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				&::before {
					content: " ";
					position: absolute;
					left: 8rpx;
					top: 12rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					border: 4rpx solid #3388ff;
					background-color: #ffffff;
				}

				&::after {
					content: " ";
					position: absolute;
					left: 14rpx;
					top: 32rpx;
					height: 93%;
					border-right: 2rpx solid #f5f5f5;
				}

				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 13rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 21rpx;
				}

				padding: 0 50rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}
			}

			padding-bottom: 35rpx;
		}
	}

	.box_7 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				&::before {
					content: " ";
					position: absolute;
					left: 8rpx;
					top: 12rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					border: 4rpx solid #3388ff;
					background-color: #ffffff;
				}

				&::after {
					content: " ";
					position: absolute;
					left: 14rpx;
					top: 32rpx;
					height: 93%;
					border-right: 2rpx solid #f5f5f5;
				}

				.t4 {
					line-height: 1.8;
					font-size: 24rpx;
					color: #666666;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 13rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 21rpx;
				}

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				padding: 0 50rpx;
				position: relative;
			}

			padding-bottom: 35rpx;
		}
	}

	.box_6 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tx1 {
				&::before {
					content: "";
					position: absolute;
					left: 8rpx;
					top: 12rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					border: 4rpx solid #3388ff;
					background-color: #ffffff;
				}

				&::after {
					content: " ";
					position: absolute;
					left: 14rpx;
					top: 32rpx;
					height: 93%;
					border-right: 2rpx solid #f5f5f5;
				}

				.t3 {
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.t2 {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 13rpx;
				}

				.t1 {
					font-size: 30rpx;
					color: #333333;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 21rpx;
				}

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				padding: 0 50rpx;
				position: relative;
			}

			padding-bottom: 35rpx;
		}
	}

	.box_5 {
		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;

		.box_content {
			.tag {
				.tag-item {
					float: left;
					padding: 9rpx 24rpx;
					font-size: 24rpx;
					color: #1787fb;
					margin: 0 20rpx 20rpx 0;
					background-color: #f4f9ff;
					border-radius: 52rpx;
				}
			}

			.dec {
				line-height: 1.8;
				font-size: 26rpx;
				color: #666666;
				word-break: break-all;
			}

			padding-bottom: 34rpx;
		}
	}

	.box_cac {
		.box_content {
			.item {
				&.phone {
					background-image: $cac_phone_ico;
					background-position: 4rpx center;
					background-repeat: no-repeat;
					background-size: 32rpx;
				}

				&.wx {
					background-image: $cac_wx_ico;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 32rpx;
				}

				&.email {
					background-image: $cac_email_ico;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 32rpx;
				}

				&.qq {
					background-image: $cac_qq_ico;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 32rpx;
				}

				font-size: 30rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0 40rpx 0 46rpx;
				word-break: break-all;

				&:not(:last-child) {
					margin-bottom: 18rpx;
				}
			}

			padding-bottom: 34rpx;
		}

		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.box_3 {
		.tx2 {
			.intent {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name {
				font-size: 30rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 19rpx;
			}

			&:not(:first-child) {
				margin-top: 35rpx;
			}

			display: block;
			position: relative;
		}

		.box_content {
			padding-bottom: 30rpx;
		}

		width: 100%;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.box_head {
		.txt {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			margin-right: 6rpx;
		}

		position: relative;
		width: 100%;
		padding: 25rpx 0;
	}

	.box_2 {
		.tx2 {
			position: relative;
			width: 100%;
			border-top: 2rpx solid #f8f8f8;
			font-size: 24rpx;
			color: #999999;
			padding: 24rpx 0;

			.right_txt {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
				font-size: 24rpx;
				color: #1787fb;
				padding: 24rpx 30rpx 24rpx 0;
				line-height: normal;

				&::after {
					position: absolute;
					right: 10rpx;
					top: 36rpx;
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx solid #1787fb;
					border-right: 2rpx solid #1787fb;
					transform: rotate(45deg);
					content: ' ';
				}
			}
		}

		.name_group {
			.avatar_box {
				&.fe::after {
					content: ' ';
					position: absolute;
					right: -6rpx;
					bottom: 6rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 100%;
					background-image: $female;
					background-color: #ff4d94;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 20rpx;
				}

				&::after {
					content: ' ';
					position: absolute;
					right: -6rpx;
					bottom: 6rpx;
					width: 26rpx;
					height: 26rpx;
					border-radius: 100%;
					background-image: $male;
					background-color: #50a6fa;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 20rpx;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					border: 0;
					border-radius: 100%;
				}

				position: absolute;
				right: 4rpx;
				top: 7rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 100%;
			}

			.tx1 {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 14rpx;
				overflow: hidden;
				white-space: nowrap;
			}

			.info {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name {
				margin-bottom: 22rpx;

				.text {
					float: left;
					font-size: 36rpx;
					color: #333333;
					font-weight: bold;
					margin-right: 16rpx;
				}

				.qu_ico {
					float: left;
					width: 72rpx;
					height: 50rpx;
					background-image: url($ImgUrl + 'high_quality_ico.png');
					background-position:0 12rpx;
					background-repeat:no-repeat;
					background-size: 72rpx 28rpx;
				}
			}

			position: relative;
			padding: 0 100rpx 0 0;
			margin-bottom: 35rpx;
		}

		padding: 30rpx 0 0;
		position: relative;
	}

	.content_wrapper {
		width: 100%;
		background-color: #ffffff;
		padding: 0 34rpx;
	}
</style>
